Ext.onReady(function(){

    // NOTE: This is an example showing simple state management. During development,
    // it is generally best to disable state management as dynamically-generated ids
    // can change across page loads, leading to unpredictable results.  The developer
    // should ensure that stable state ids are set for stateful components in real apps.
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    var map;
    var s_option5 = {
        reproject : false,
        opacity : 1,
        visibility : false,
        isBaseLayer : false,
        displayInLayerSwitcher : true
    };
    var host_url="http://127.0.0.1:8080/geoserver/wms";
    var format = "image/png";
    var options = {
        projection : new OpenLayers.Projection('EPSG:900913'),
        units : "m",
        maxResolution : 152.87405654296876,
        maxExtent : new OpenLayers.Bounds(-2.003750834E7, -2.003750834E7,
        2.003750834E7, 2.003750834E7),
        tileSize : new OpenLayers.Size(512, 512)
    };
    var  wmsLayers = ['main_roads', 'main_roads_translate', 'building_translate'];


    map = new OpenLayers.Map('map',options);
    map.addControl(new OpenLayers.Control.LayerSwitcher());

    var gphy = new OpenLayers.Layer.Google(
    "Google Physical",
    {
        type: google.maps.MapTypeId.TERRAIN

    },{isBaseLayer:true}
);
    var gmap = new OpenLayers.Layer.Google(
    "Google Streets", // the default
    {
        numZoomLevels: 22
    },{isBaseLayer:true}
);
    var ghyb = new OpenLayers.Layer.Google(
    "Google Hybrid",
    {
        type: google.maps.MapTypeId.HYBRID,
        numZoomLevels: 22
    },{isBaseLayer:true}
);
    var gsat = new OpenLayers.Layer.Google(
    "Google Satellite",
    {
        type: google.maps.MapTypeId.SATELLITE,
        numZoomLevels: 22
    },{isBaseLayer:true}
);
    var geom = new OpenLayers.Layer.WMS("geom", host_url, {
        singleTile:true,
        layers : ['GMCC:main_road','GMCC:main_road_translate','GMCC:building_translate'],
        srs : 'EPSG:900913',
        transparent : true,
        format : format
    }, s_option5);

    //    var roads_t = new OpenLayers.Layer.WMS("roads_t", host_url, {
    //        layers : 'GMCC:main_road_translate',
    //        srs : 'EPSG:900913',
    //        transparent : true,
    //        format : format
    //    }, s_option5);
    //
    //    var building = new OpenLayers.Layer.WMS("建筑", host_url, {
    //        layers : 'GMCC:building_translate',
    //        srs : 'EPSG:900913',
    //        transparent : true,
    //        format : format
    //    }, s_option5);


    //map.addLayers([gsat,gphy, gmap, ghyb,roads]);
    //map.addLayers([gmap,ghyb,gsat,gphy,roads,roads_t,building]);

    map.addLayer(gsat,gmap);



    // Google.v3 uses EPSG:900913 as projection, so we have to
    // transform our coordinates
    /* map.setCenter(new OpenLayers.LonLat(12613001,2645897).transform(
        new OpenLayers.Projection("EPSG:4326"),
        map.getProjectionObject()
        ), 5);
     */
    map.setCenter( new OpenLayers.LonLat(12613001,2645897),13);

    var tree = new mapfish.widgets.LayerTree({
        map: map,
        el: 'tree',
        enableDD: true,
        showWmsLegend:true,
        plugins: [
            mapfish.widgets.LayerTree.createContextualMenuPlugin([
                'opacitySlide',
                'remove'
            ])
        ]
        });

        tree.render();


        var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
                // create instance immediately
                new Ext.BoxComponent({
                    region: 'north',
                    height: 60, // give north and south regions a height
                    autoEl: {
                        tag: 'div',
                        html:'<p>north - generally for menus, toolbars and/or advertisements</p>'
                    }
                }), {
                    // lazily created panel (xtype:'panel' is default)
                    region: 'south',
                    contentEl: 'south',
                    split: true,
                    height: 100,
                    minSize: 100,
                    maxSize: 200,
                    collapsible: true,
                    title: 'South',
                    margins: '0 0 0 0'
                }, {
                    region: 'east',
                    title: 'East Side',
                    collapsible: true,
                    split: true,
                    width: 225, // give east and west regions a width
                    minSize: 175,
                    maxSize: 400,
                    margins: '0 1 0 0',
                    layout: 'fit', // specify layout manager for items
                    items:            // this TabPanel is wrapped by another Panel so the title will be applied
                    new Ext.TabPanel({
                        border: false, // already wrapped so don't add another border
                        activeTab: 1, // second tab initially active
                        tabPosition: 'bottom',
                        items: [{
                                html: '<p>A TabPanel component can be a region.</p>',
                                title: 'A Tab',
                                autoScroll: true
                            }, new Ext.grid.PropertyGrid({
                                title: 'Property Grid',
                                closable: true,
                                source: {
                                    "(name)": "Properties Grid",
                                    "grouping": false,
                                    "autoFitColumns": true,
                                    "productionQuality": false,
                                    "created": new Date(Date.parse('10/15/2006')),
                                    "tested": false,
                                    "version": 0.01,
                                    "borderWidth": 1
                                }
                            })]
                    })
                }, {
                    region: 'west',
                    id: 'west-panel', // see Ext.getCmp() below
                    title: 'West',
                    split: true,
                    width: 200,
                    minSize: 175,
                    maxSize: 400,
                    collapsible: true,
                    margins: '0 0 0 5',
                    layout: {
                        type: 'accordion',
                        animate: true
                    },
                    items: [{
                            contentEl: 'west',
                            title: 'Navigation',
                            border: false,
                            iconCls: 'nav'
                        }, {
                            title: 'Settings',
                            html: '<p>Some settings in here.</p>',
                            border: false,
                            iconCls: 'settings',
                            items: [{
                                    xtype: 'layertree',
                                    map: map,
                                    border: false
                                }]
                        }]
                },
                // in this instance the TabPanel is not wrapped by another panel
                // since no title is needed, this Panel is added directly
                // as a Container
                new Ext.TabPanel({
                    region: 'center', // a center region is ALWAYS required for border layout
                    deferredRender: false,
                    activeTab: 0,     // first tab initially active
                    items: [{
                            contentEl: 'center1',
                            title: '地图',
                            closable: true,
                            autoScroll: false,
                            layout:'fit',
                            xtype: 'mapcomponent',
                            map: map
                        }, {
                            contentEl: 'center2',
                            title: 'Center Panel',

                            autoScroll: false

                        }]
                })]
        });
        // get a reference to the HTML element with id "hideit" and add a click listener to it
        Ext.get("hideit").on('click', function(){
            // get a reference to the Panel that was created with id = 'west-panel'
            var w = Ext.getCmp('west-panel');
            // expand or collapse that Panel based on its collapsed property state
            w.collapsed ? w.expand() : w.collapse();
        });
    });